<template>
	<view class="page-content">
		<view class="page-title">基本使用</view><ui-br />
		<ui-code :code="code0"></ui-code><ui-br />
		<view class="page-title">属性说明</view><ui-br />
		<view class="page-tips">名称带下划线图标没有<span class="span-code">color | iconBold</span>属性
		</view><ui-br />
		<ui-table :data="tableData" /><ui-br />
		<view class="page-title">图标展示</view><ui-br />
		<view class="page-icon-content">
			<template v-for="(item,index) in iconList">
				<view class="page-icon-content-item" @click="copy(item.name)">	
					<view class="icon-box"><ct-icon :type="item.name" :color="item.color" :size="item.size || '48rpx'"></ct-icon></view>
					<view class="icon-intro">{{item.name}}</view>
				</view>
			</template>
		</view>	
		<!-- <ct-icon type="icon_circlefriends" size="60rpx" iconBold></ct-icon> -->
		<!-- <ct-icon type="close" size="60rpx" iconBold></ct-icon>
		<ct-icon type="close" size="60rpx"></ct-icon> -->
		<!-- <ct-icon type="arrow-right" size="40rpx" color="#31B67A" iconBold></ct-icon>
		<br/>
		<br/>
		<ct-icon type="arrow-left" size="80rpx" color="#31B67A"></ct-icon>
		<br/>
		<br/>
		<ct-icon type="arrow-top" size="80rpx" color="#31B67A"></ct-icon>
		<br/>
		<br/>
		<ct-icon type="arrow-bottom" size="80rpx" color="#31B67A"></ct-icon> -->
	</view>
</template>

<script>
	import {code0} from './code.js'
	export default {
		data(){
			return {
				code0:"",
				iconList:[
				{name:'arrow-right'},
					{name:'arrow-left'},
					{name:'arrow-top'},
					{name:'arrow-bottom'},
					{name:'arrow-circle-right'},
					{name:'arrow-circle-left'},
					{name:'arrow-circle-top'},
					{name:'arrow-circle-bottom'},
					{name:'close'},
					{name:'close-circle'},
					{name:'close-circle-bg'},
					{name:'filter'},
					{name:'share'},
					{name:'sort'},
					{name:'gou'},
					{name:'gou-circle-bg'},
					{name:'trash'},
					{name:'scan'},
					{name:'bell'},
					
					{name:'sigongge'},
					{name:'ergongge'},
				],
				tableData:[{
						parameter: 'size',
						values: '默认30rpx'
					},{
						parameter: 'iconBold',
						values: 'true / false'
					},{
						parameter: 'color',
						values: '图标颜色'
					},{
						parameter: 'rightText',
						values: '右侧文字'
					},{
						parameter: 'leftText',
						values: '左侧文字'
					},{
						parameter: 'textColor',
						values: '文字颜色'
					},]
			}
		},
		created() {
			this.code0 = code0
		},
		methods:{
			copy(name){
				let data = `<ct-icon type="${name}" />`
				uni.$ct.copyText({
					data:data,
					success:(e)=>{
						uni.showToast({
							icon:'none',
							title:"复制成功"
						})
					},
					fail:(e)=>{
						uni.showToast({
							icon:'none',
							title:"复制失败"
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-content{
	.page-icon-content{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		border: 1px solid $ct-tips-color;
		border-right: 0;
		border-bottom: 0;
		.page-icon-content-item{
			width: calc(33.33% - 1px);
			height: 200rpx;
			border-right: 1px solid $ct-tips-color;
			border-bottom: 1px solid $ct-tips-color;
			text-align: center;
			padding: 10rpx;
			box-sizing: border-box;
			.icon-box{
				color: $ct-tips-color;
				font-size: 28rpx;
				height:90rpx;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				align-items: center;
			}
			.icon-intro{
				color: $ct-tips-color;
				font-size: 28rpx;
				word-break: break-all;
				height:90rpx;
			}
		}
		
	}
}
</style>